<template>
  <div class="blackuser">
   <header>
      <span>
        <span>账号检索</span>
        <el-input v-model="user" placeholder="请输入关键字" style="width:200px"></el-input>
      </span>
      <p style="width:100%"> <el-button type="primary" icon="el-icon-search" @click="searchAll"  style="float:right;margin:12px 0">搜索</el-button></p>
    </header>
   
    <div >
      <el-table
      :header-cell-style="{background:'#EBEEF5'}"
      :data="blacklist.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width:100%">
     <el-table-column prop="name" label="用户账号">
        <template slot-scope="scope">{{scope.row.username}}</template>
      </el-table-column>
       <el-table-column prop="name" label="用户姓名">
        <template slot-scope="scope">{{scope.row.name}}</template>
      </el-table-column>
       <el-table-column prop="date" label="是否为初始密码" >
          <template slot-scope="scope">{{scope.row.password==='123456'?'是':'否'}}</template>
      </el-table-column>
      <el-table-column prop="date" label="最近登录日期" >
        <template slot-scope="scope">{{$getDate(Number(scope.row.lastlogin))}}</template>
      </el-table-column>
      <el-table-column prop="date" label="创建时间" >
        <template slot-scope="scope">{{$getDate(Number(scope.row.createtime))}}</template>
      </el-table-column>
     
    </el-table>
     <!-- 分页器 -->
    <div class="pagination_m">
       <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,6,8]" 
          :page-size="pageSize"        
          layout="total, sizes, prev, pager, next, jumper"
          :total="blacklist.length">   
      </el-pagination>
    </div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        user:'',
        blacklist:[],
        pageSize:5,
        currentPage:1
      };
    },
    methods:{
    setList(){
    this.$httpAxios(this.$api.black_List(),res=>{
          this.blacklist=res.data;
          this.currentPage = 1;
    })
     
  },
    // 分页器
    handleCurrentChange(currentPage) {this.currentPage = currentPage;},
    // 每张显示的个数
    handleSizeChange(size){this.pageSize = size;},
    
    searchAll(){
        this.$httpAxios(this.$api.black_Search({username:this.user}),res=>{
            this.blacklist = res.data;
            this.$message.success(res.msg);  
            this.currentPage = 1;
        })
    },
    },
    mounted(){this.setList()}
  }
  
</script>